<template>
  <div class="app-container pt0">
    <div class="form_css">
      <div class="f_title">展品报名</div>
      <div class="f_form">
        <el-button type="primary" size="mini" @click="handleAdd">
          新增展品报名
        </el-button>
      </div>

      <div>
        <el-table :data="list">
          <el-table-column
            label="操作"
            align="center"
            width="100"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                icon="el-icon-view"
                @click="handleView(scope.row)"
              />
              <el-button
                type="text"
                icon="el-icon-edit-outline"
                @click="handleUpdate(scope.row, scope.$index)"
              />
              <el-button
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row, scope.$index)"
              />
            </template>
          </el-table-column>

          <el-table-column
            label="企业名称"
            align="center"
            prop="companyName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="展品名称"
            align="center"
            prop="name"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="所属分类"
            align="center"
            prop="typeName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="封面图片"
            align="center"
            prop="faceUrl"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <div
                v-if="scope.row.faceUrl"
                class="demo-image__preview table-face m_auto"
              >
                <el-image
                  :src="scope.row.faceUrl"
                  :preview-src-list="[scope.row.faceUrl]"
                />
              </div>
              <span v-else>暂无图片</span>
            </template>
          </el-table-column>
        </el-table>

        <div style="width: 100%; text-align: center; margin-bottom: 100px">
          <el-button
            class="sub_btn"
            type="primary"
            @click="submitForm"
            :loading="btnLoading"
          >
            提交报名
          </el-button>
        </div>
      </div>

      <!-- 添加或修改 -->
      <el-dialog
        :title="title"
        :visible.sync="open"
        width="800px"
        append-to-body
        class="auto-dialog"
      >
        <el-form ref="form" :model="form" :rules="rules" label-width="110px">
          <el-divider content-position="left">
            <div class="m-title">填报信息：</div>
          </el-divider>
          <el-row :gutters="10">
            <el-col :span="12">
              <el-form-item label="展区名称：" prop="deptId">
                <treeselect
                  v-model="form.deptId"
                  :options="deptOptions"
                  :show-count="true"
                  placeholder="请选择展区名称"
                  style="height: 36px"
                  @select="selectTree"
                  :flat="true"
                  :normalizer="myNormalizer"
                  class="no_tree"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="企业名称：" prop="companyName">
                <el-input
                  v-model="form.companyName"
                  placeholder="请输入企业名称"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系人：" prop="userName">
                <el-input v-model="form.userName" placeholder="请输入联系人" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话：" prop="userMobile">
                <el-input
                  v-model="form.userMobile"
                  placeholder="请输入联系电话"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-divider content-position="left">
            <div class="m-title">基础信息：</div>
          </el-divider>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="所属分类：" prop="typeId">
                <el-select
                  v-model="form.typeId"
                  placeholder="请选择所属分类"
                  clearable
                  class="w100"
                >
                  <el-option
                    v-for="dict in dict.type.sys_goods_type"
                    :key="dict.raw.dictCode"
                    :label="dict.label"
                    :value="dict.raw.dictCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="展品名称：" prop="name">
                <el-input
                  v-model="form.name"
                  placeholder="请输入展品名称，20字以内"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="展品尺寸：">
                <el-input
                  v-model="form.measure"
                  placeholder="请输入展品尺寸，30字以内"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="展品材质：">
                <el-input
                  v-model="form.texture"
                  placeholder="请输入展品材质，30字以内"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="展品工艺：">
                <el-input
                  v-model="form.craft"
                  placeholder="请输入展品工艺，30字以内"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="展品创意：">
                <el-input
                  v-model="form.creativity"
                  placeholder="请输入展品创意，30字以内"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-divider content-position="left">
            <div class="m-title">扩展信息</div>
          </el-divider>

          <el-form-item label="展品简介：" prop="info">
            <el-input
              v-model="form.info"
              placeholder="请输入展品简介，20字以内"
            />
          </el-form-item>
          <el-form-item label="封面图片：" prop="faceUrl" ref="imgViod">
            <div>
              <div
                v-if="form.faceUrl"
                style="width: 100px; height: 100px; position: relative"
              >
                <div v-if="form.faceUrl" class="demo-image__preview w100-img">
                  <el-image
                    :src="form.faceUrl"
                    :preview-src-list="[form.faceUrl]"
                    class="avatar"
                  >
                  </el-image>
                </div>
                <i
                  v-if="form.faceUrl"
                  class="el-icon-delete remove-img"
                  @click="handleRemove"
                />
              </div>
              <uploadBig
                v-else
                :showBtn="true"
                btnText="上传封面图片"
                upWidth="104px"
                upHeight="30px"
                upLineHeight="30px"
                :accept="uploadAccept"
                :showFileList="false"
                :fileSize="5"
                @getUpload="uploadFaceUrl"
              />
            </div>
            <div class="w100 small-text" style="line-height: normal">
              提示：建议上传图片大小不超过
              <span class="red">5M！</span> ，宽度不超过<span class="red">
                570px </span
              >， 格式为
              <span class="red">{{ uploadAccept }}</span>
              的文件
            </div>
          </el-form-item>
          <el-form-item label="展品图片：" prop="sigPost">
            <ul
              v-if="showUrlList && showUrlList.length != 0"
              class="more-big-list"
            >
              <li v-for="(item, index) in showUrlList" :key="index">
                <div v-if="item.img" class="demo-image__preview">
                  <el-image
                    :src="item.img"
                    :preview-src-list="[item.img]"
                    class="avatar"
                  />
                </div>
                <el-input
                  v-model="item.info"
                  placeholder="请输入图片简介不超过40字"
                  :maxlength="40"
                  size="small"
                  clearable
                />
                <i
                  class="el-icon-delete remove-img"
                  @click="handleRemoveMore(index)"
                />
              </li>
            </ul>
            <ul class="w100 fl">
              <div>
                <uploadBig
                  :showBtn="true"
                  btnText="上传展品图片"
                  upWidth="104px"
                  upHeight="30px"
                  upLineHeight="30px"
                  :accept="uploadAccept"
                  :showFileList="false"
                  :fileSize="5"
                  @getUpload="uploadMoreImg"
                />
              </div>
              <div class="w100 small-text">
                提示：建议上传图片大小不超过
                <span class="red">5M！</span> ，宽度不超过<span class="red">
                  570px
                </span>
                ， 格式为
                <span class="red">{{ uploadAccept }}</span>
                的文件
              </div>
            </ul>
          </el-form-item>
          <el-form-item label="展品视频：">
            <div
              v-if="form.videoUrl"
              style="width: 240px; height: 140px; position: relative"
            >
              <video
                :src="form.videoUrl"
                controls
                style="width: 240px; height: 140px"
              />
              <i class="el-icon-delete remove-img" @click="removeVideo" />
            </div>

            <uploadBig
              v-else
              :showBtn="true"
              btnText="上传视频"
              upWidth="50px"
              upHeight="30px"
              upLineHeight="30px"
              accept=".mp4, .avi"
              :showFileList="false"
              :fileSize="5000"
              @getUpload="uploadVideo"
            />
            <div class="w100 small-text">
              建议提示：建议上传大小不超过
              <span class="red">5G！</span>
              上传格式为
              <span class="red">.mp4,.avi </span>
              的文件
            </div>
          </el-form-item>
          <el-form-item label="展品介绍" prop="showInfo">
            <editor v-model="form.showInfo" :min-height="300" />
          </el-form-item>
          <el-form-item label="参展年限：" prop="joinYear">
            <el-select
              v-model="form.joinYear"
              placeholder="请选择参展年限"
              class="w100"
            >
              <el-option
                v-for="item in dict.type.sys_exhibit_year"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="saveBtn" :loading="btnLoading">
            暂 存
          </el-button>
          <el-button @click="open = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- 详情 -->
    <el-dialog
      title="查看填报信息"
      :visible.sync="detailOpen"
      width="800px"
      append-to-body
      :before-close="handleCancel"
      class="auto-dialog"
    >
      <detailDialog ref="detailInfo" :detailForm="detailForm" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addGood } from "@/api/project/good";
import { deptTreeSelect } from "@/api/system/user";

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import detailDialog from "@/components/Project/dialog/detail/exhibit";

export default {
  name: "User",
  dicts: ["sys_goods_type", "sys_exhibit_year"],
  components: { Treeselect, detailDialog },
  data() {
    return {
      // 遮罩层
      loading: false,
      btnLoading: false,

      title: "",
      open: false,
      form: {},
      // 表单校验
      rules: {
        companyName: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
        ],
        deptId: [
          { required: true, message: "请选择展区名称", trigger: "change" },
        ],
        userName: [
          { required: true, message: "请输入联系人", trigger: "blur" },
        ],
        userMobile: [
          { required: true, message: "请输入联系方式", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        typeId: [
          { required: true, message: "请选择所属分类", trigger: "change" },
        ],
        name: [{ required: true, message: "请输入展品名称", trigger: "blur" }],

        info: [
          {
            required: true,
            message: "请输入展品简介",
            trigger: "blur",
          },
        ],
        faceUrl: [
          { required: true, message: "请上传封面图片", trigger: "blur" },
        ],
        showInfo: [
          { required: true, message: "请输入展品介绍", trigger: "blur" },
        ],
        joinYear: [
          { required: true, message: "请选择参展年限", trigger: "change" },
        ],
      },

      // 部门树选项
      deptOptions: [],
      uploadAccept: ".png, .jpg, .jpeg",
      showUrlList: [],

      detailOpen: false,
      detailForm: {},

      editIndex: undefined,
      list: [],

      sig: 0,
    };
  },

  created() {
    this.getDeptTree();
  },
  methods: {
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect({ flag: this.sig }).then((response) => {
        this.deptOptions = response.data;
      });
    },

    // 表单重置
    reset() {
      this.form = {
        deptId: undefined,
        deptName: undefined,
        goodsId: undefined,
        companyName: undefined,
        userName: undefined,
        userMobile: undefined,
        typeId: undefined,
        name: undefined,
        measure: undefined,
        texture: undefined,
        craft: undefined,
        creativity: undefined,
        info: undefined,
        faceUrl: undefined,
        picUrls: null,
        videoUrl: undefined,
        showInfo: undefined,
        joinYear: "2025",
        sig: this.sig,
      };
      this.resetForm("form");
      this.showUrlList = [];
      this.editIndex = undefined;
    },

    // 新增
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "新增展品报名";
    },

    // 暂存
    saveBtn() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.showUrlList.length != 0) {
            this.form.picUrls = JSON.stringify(this.showUrlList);
          } else {
            this.form.picUrls = "";
          }

          var param = {
            deptId: this.form.deptId,
            deptName: this.form.deptName,
            goodsId: this.form.goodsId,
            companyName: this.form.companyName,
            userName: this.form.userName,
            userMobile: this.form.userMobile,
            typeId: this.form.typeId,
            name: this.form.name,
            measure: this.form.measure,
            texture: this.form.texture,
            craft: this.form.craft,
            creativity: this.form.creativity,
            info: this.form.info,
            faceUrl: this.form.faceUrl,
            picUrls: this.form.picUrls,
            videoUrl: this.form.videoUrl,
            showInfo: this.form.showInfo,
            joinYear: this.form.joinYear,
            typeName: this.form.typeName,
            sig: this.form.sig,
          };

          if (this.editIndex != undefined) {
            this.$set(this.list, this.editIndex, param);
          } else {
            this.list.push(param);
          }
          this.open = false;
          this.reset();
        }
      });
    },

    // 修改
    handleUpdate(row, index) {
      this.reset();

      this.form = row;
      this.editIndex = index;
      if (row.picUrls) {
        this.showUrlList = JSON.parse(row.picUrls);
      } else {
        this.showUrlList = [];
      }

      this.open = true;
      this.title = "修改展品报名";
    },

    // 删除
    handleDelete(row, index) {
      this.list.splice(index, 1);
    },

    /** 提交按钮 */
    submitForm: function () {
      if (this.list.length === 0) {
        this.$modal.msg("请先添加展品报名信息");
      } else {
        addGood(this.list)
          .then((response) => {
            this.$modal.msgSuccess("提交成功");
            this.reset();
            this.list = [];
          })
          .finally(() => {});
      }
    },

    // 封面上传
    uploadFaceUrl(data) {
      this.form.faceUrl = data;
      this.$refs.imgViod.clearValidate();
    },

    // 移除封面图
    handleRemove() {
      this.form.faceUrl = undefined;
    },

    // 图片相册上传
    uploadMoreImg(data) {
      this.showUrlList.push({
        img: data,
        info: undefined,
      });
    },

    // 移除图片相册
    handleRemoveMore(index) {
      this.showUrlList.splice(index, 1);
    },

    // 上传视频
    uploadVideo(data) {
      this.form.videoUrl = data;
    },

    removeVideo() {
      this.form.videoUrl = undefined;
    },

    myNormalizer(node) {
      return {
        id: node.id,
        label: node.label,
        parentId: node.parentId,
        isDisabled: Number(node.parentId) < 101,
        children: node.children,
      };
    },

    // 查看详情
    handleView(row) {
      this.detailForm = row;
      if (row.picUrls && row.picUrls != "") {
        this.detailForm.imgList = JSON.parse(row.picUrls);
      } else {
        this.detailForm.imgList = [];
      }
      this.detailOpen = true;
    },

    // 关闭
    handleCancel() {
      this.detailOpen = false;
      this.detailForm.videoUrl = "";
    },

    changeType(e) {
      var obj = this.dict.type.sys_goods_type.filter((item) => {
        return item.raw.dictCode === e;
      });
      this.form.typeName = obj[0].label;
    },

    selectTree(e) {
      this.form.deptName = e.label;
      this.form.deptId = e.id;
    },
  },
};
</script>

<style scoped>
.form_css {
  width: 700px;
  margin: auto;
}

.f_title {
  width: 100%;
  text-align: left;
  overflow: hidden;
  font-size: 22px;
  font-weight: bold;
  padding-bottom: 15px;
  margin-bottom: 30px;
  border-bottom: 1px solid #ddd;
}
.f_form {
  width: 700px;
  height: auto;
  margin-bottom: 20px;
  text-align: right;
}

.form_left {
  width: 100%;
  padding-left: 80px;
}

.m_auto {
  margin: auto;
}

.sub_btn {
  width: 200px;
  margin-top: 30px;
}
</style>
